import QtQuick 2.12
import QtQuick.Window 2.12
import QtQml 2.12
import QtQuick.Controls 2.5

Window {
    id: mainWindow
    width: 640
    height: 480
    minimumWidth: 640
    minimumHeight: 480
    visible: true
    title: qsTr("VirtualNetTV")
    color: "black"
//    flags: Qt.FramelessWindowHint

    property int curIndex: 0

    LiveVideoPlayer {
        id: player
        anchors.fill: parent

        onLoading: {
            loadingIcon.visible = true;
            netError.visible = false;
        }

        onReady: {
            loadingIcon.visible = false;
            netError.visible = false;
        }

        onLoadError: {
            loadingIcon.visible = false;
            netError.visible = true;
        }
    }

    Image {
        id: netError
        visible: false
        source: "qrc:/image/net_error.png"
        anchors.centerIn: parent
    }

    Image {
        id: loadingIcon
        source: "qrc:/image/loading.png"
        anchors.centerIn: parent

        RotationAnimation {
            id: rotationAnimation
            target: loadingIcon
            from: 0
            to: 360
            duration: 200 // 动画持续时间（毫秒）
            loops: Animation.Infinite // 无限循环
            running: loadingIcon.visible
        }
    }

    Image {
        id: volumeShow
        source: "qrc:/image/volume.svg"
        height: parent.height * 0.2
        width: height
        anchors.centerIn: parent
        state: "hide"

        Text {
            text: parseInt(player.volume * 10)
            anchors.centerIn: parent
            font.pixelSize: 28
            font.bold: true
        }

        Timer {
            id: volumeShowTimer
            interval: 1000
            repeat: false
            onTriggered: {
                volumeShow.state = "hide";
            }
        }

        states: [
            State {
                name: "hide"
                PropertyChanges {
                    target: volumeShow
                    opacity: 0
                }
            },
            State {
                name: "show"
                PropertyChanges {
                    target: volumeShow
                    opacity: 1
                }
            }
        ]

        transitions: [
            Transition {
                from: "*"; to: "*"
                PropertyAnimation {
                    properties: "opacity"
                    easing.type: Easing.OutQuart
                    duration: 1000
                }
            }
        ]
    }

    Item {
        anchors.fill: parent
        focus: true
        Keys.onPressed: {
            switch (event.key) {
            case Qt.Key_Space: {
                if (player.isRunning) {
                    player.pause();
                } else {
                    player.play();
                }
            } break;
            case Qt.Key_F11: {
                if (visibility === Window.FullScreen) {
                    visibility = Window.Windowed;
                } else {
                    visibility = Window.FullScreen;
                }
            } break;
            case Qt.Key_Escape: {
                visibility = Window.Windowed;
            } break;
            case Qt.Key_Up: {
                volumeShow.state = "show";
                if (player.volume < 1) {
                    player.volume += 0.1;
                }
                volumeShowTimer.stop();
                volumeShowTimer.restart();
            } break;
            case Qt.Key_Down: {
                volumeShow.state = "show";
                if (player.volume > 0.1) {
                    player.volume -= 0.1;
                }
                volumeShowTimer.stop();
                volumeShowTimer.restart();
            } break;
            case Qt.Key_Left: {
                if (curIndex > 1) {
                    curIndex--;
                    player.source = channelList.get(curIndex-1).source;
                }
            } break;
            case Qt.Key_Right: {
                if (curIndex < channelList.count) {
                    curIndex++;
                    player.source = channelList.get(curIndex-1).source;
                }
            } break;
            }
        }
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        scrollGestureEnabled: true

        onClicked: {
            if (player.isRunning) {
                player.pause();
            } else {
                player.play();
            }
        }

        onPositionChanged: {
            if (pressed) {
            } else {
                if (mouse.x < drawer.width) {
                    drawer.state = "show";
                    closeButton.state = "hide";
                } else {
                    drawer.state = "hide";
                    closeButton.state = "show";
                }
            }
        }

        onDoubleClicked: {
            if (visibility === Window.FullScreen) {
                visibility = Window.Windowed;
            } else {
                visibility = Window.FullScreen;
            }
        }
    }

    ListModel { // 频道列表
        id: channelList
    }

    Item { // 抽屉效果
        id: drawer
        width: 400
        height: parent.height
        anchors.left: parent.left
        state: "hide"

        states: [
            State {
                name: "hide"
                PropertyChanges {
                    target: drawer
                    opacity: 0
                    anchors.leftMargin: -drawer.width
                }
            },
            State {
                name: "show"
                PropertyChanges {
                    target: drawer
                    opacity: 1
                    anchors.leftMargin: 10
                }
            }
        ]

        transitions: [
            Transition {
                from: "*"; to: "*"
                PropertyAnimation {
                    properties: "opacity,anchors.leftMargin"
                    easing.type: Easing.OutQuart
                    duration: 500
                }
            }
        ]

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            scrollGestureEnabled: true
        }

        ListView {
            anchors.fill: parent
            clip: true
            spacing: 10

            model: channelList
            delegate: Rectangle {
                id: itemRect
                Keys.forwardTo: parent
                border.color: "gray"
                border.width: 0
                height: 60
                width: parent.width
                color: "#32FFFFFF"
                radius: 10

                Text {
                    id: itemName
                    color: curIndex === model.index ? "#CCFF00" : "#FFFFFF"
                    text: model.index + " " +model.name
                    font.pixelSize: 28
                    font.bold: true
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    anchors.verticalCenter: parent.verticalCenter
                }

                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true

                    onClicked: {
                        player.source = model.source;
                        curIndex = model.index;
                    }

                    onEntered: {
                        itemName.font.pixelSize = 34;
                        itemRect.color = "#80000000";
                        itemRect.border.width = 1;
                    }

                    onExited: {
                        itemName.font.pixelSize = 28;
                        itemRect.color = "#32FFFFFF";
                        itemRect.border.width = 0;
                    }
                }
            }
        }
    }

    Text {
        visible: drawer.state === "show"
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        color: "gray"
        text: "双击画面 进入/退出 全屏\n单击画面 播放/暂停\nF11 进入/退出 全屏\nEsc退出全屏\n上下方向键调节音量\nQQ:563570587"
    }

    Item {
        id: closeButton
        height: parent.height * 0.1
        width: height
        anchors.right: parent.right
        anchors.rightMargin: height * 0.3
        anchors.top: parent.top
        anchors.topMargin: anchors.rightMargin
        visible: false // REMOVEME
        state: "hide"

        Image {
            source: "qrc:/image/close.svg"
            anchors.fill: parent
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                Qt.quit();
            }
        }

        states: [
            State {
                name: "hide"
                PropertyChanges {
                    target: closeButton
                    opacity: 0
                }
            },
            State {
                name: "show"
                PropertyChanges {
                    target: closeButton
                    opacity: 1
                }
            }
        ]

        transitions: [
            Transition {
                from: "*"; to: "*"
                PropertyAnimation {
                    properties: "opacity"
                    easing.type: Easing.OutQuart
                    duration: 1000
                }
            }
        ]
    }

    Component.onCompleted: {
        apiNetWork.getLiveResource();
    }

    Connections {
        target: apiNetWork

        onSig_getLiveResourceDone: {
            for (var i = 0; i < itemList.length; i++) {
                channelList.append({"index": i+1, "name": itemList[i].name, "source": itemList[i].source});
            }

            player.source = channelList.get(0).source;
            curIndex = 1;
        }
    }
}
